<template>
  <div id="content">
    <el-table :data="tableData"  style="width: 100%" @row-click="selectionChange">

      <el-table-column prop="image" label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.image">
        </template>
      </el-table-column>

      <el-table-column prop="name" label="歌名">

      </el-table-column>

      <el-table-column v-if="tableData" prop="singer" label="歌手">
      </el-table-column>

      <el-table-column prop="album" label="专辑">

      </el-table-column>

      <el-table-column label="更多" >
        <span class="iconfont icon-qita" style="font-size: 20px;"></span>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    props:{
        tableData:Array
    },
    methods:{
      ...mapMutations('music',['getUrl','changeIsplay','getmusic']),
      ...mapMutations('muslyric',['getLyric','getmusicinfo']),
      selectionChange (row,event,column){
            let res = row.lyric
            this.getLyric(res)
            this.getmusicinfo(row)
            this.getmusic(row)
        }
    },
    data() {
      return {

      }
    },
}
</script>

<style lang="less" scoped>

.el-table__row {
  td {
    .cell {
        img {
          width: 100px;
          height: 100px;
          margin-right: 10px;
          cursor: pointer;
      }
    }
  }
}
::v-deep .el-table th{
    text-align: center;
  }
  ::v-deep .el-table td, .el-table th {
    text-align: center;
  }
</style>
